<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		body {
			background-color: rgb(251, 251, 251);
		}

		#img {
			width: 300px;
			height: 300px;
			position: absolute;
			left: 0px;
			top: 50%;
		}
	</style>
	<script>
		var w;//页面的宽度
		var img;//图像对象
		var imgLeft;//图像左边的位置
		var imgWidth; //图像的宽度
		var delta = 10;//每次移动的距离


		window.onload = function () {
			w = window.innerWidth;
			console.log(w);
			img = document.getElementById("img");
			imgLeft = img.offsetLeft;
			imgWidth = img.width;
			// console.log(img.width);
			//调用move（）方法
			move();
		};
		function move() {
			//判断图像是否越界（超出页面的宽度）
			if (imgLeft < 0 || imgLeft + imgWidth > w) {
				delta = -delta;//变号
			}
			img.style.left = imgLeft + delta + "px";
			//移动位置后需要重新修改左边的位置
			imgLeft = img.offsetLeft;
			//重复不断调用函数
			setTimeout(move, 30);
		}

	</script>
</head>

<body>


	<img src="./小熊.gif" id="img" />

</body>

</html>